<template>
  <LayoutTabs v-model:activeKey="activeKey" :options="FuncTabs" :func-bean="funcBean" type="card">
    <template #pane="{ tab }">
      <component :is="tab" :func-bean="funcBean"></component>
    </template>
  </LayoutTabs>
</template>
<script>
  import { defineComponent, ref } from 'vue';
  import { Tabs, Panel } from '@jecloud/ui';
  import { FuncBase, FuncDataFlow, FuncHelp } from '../index';
  import { FuncTabs } from '../../hooks/tabs-config';
  import LayoutTabs from './layout-tabs.vue';
  export default defineComponent({
    name: 'FuncLayout',
    components: {
      Panel,
      PanelItem: Panel.Item,
      Tabs,
      TabPane: Tabs.TabPane,
      FuncBase,
      FuncDataFlow,
      FuncHelp,
      LayoutTabs,
    },
    props: { funcBean: Object },
    setup() {
      const activeKey = ref(FuncTabs[0].key);
      return { FuncTabs, activeKey };
    },
  });
</script>
<style></style>
